<template>
  <div class="container mx-auto px-4 py-8">
    <h2 class="text-2xl font-bold mb-6">关于花伴</h2>
    
    <div class="max-w-3xl mx-auto space-y-6">
      <el-card class="about-section">
        <h3 class="text-xl font-bold mb-4">我们的故事</h3>
        <p class="text-gray-600 leading-relaxed">
          花伴成立于2024年，是一家专注于为用户提供高品质鲜花服务的在线平台。
          我们致力于将每一束花都变成一个故事，为您传递最真挚的情感。
        </p>
      </el-card>

      <el-card class="about-section">
        <h3 class="text-xl font-bold mb-4">我们的优势</h3>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
          <div class="text-center p-4">
            <el-icon class="text-primary text-3xl mb-2"><Timer /></el-icon>
            <h4 class="font-bold mb-2">准时配送</h4>
            <p class="text-gray-600">精准的配送时间，让您的心意准时传达</p>
          </div>
          <div class="text-center p-4">
            <el-icon class="text-primary text-3xl mb-2"><Star /></el-icon>
            <h4 class="font-bold mb-2">优质花材</h4>
            <p class="text-gray-600">严选优质花材，确保最佳观赏时间</p>
          </div>
          <div class="text-center p-4">
            <el-icon class="text-primary text-3xl mb-2"><Service /></el-icon>
            <h4 class="font-bold mb-2">贴心服务</h4>
            <p class="text-gray-600">专业的客服团队，为您解答各类问题</p>
          </div>
        </div>
      </el-card>

      <el-card class="about-section">
        <h3 class="text-xl font-bold mb-4">联系我们</h3>
        <div class="space-y-2">
          <p><strong>客服电话：</strong>400-123-4567</p>
          <p><strong>营业时间：</strong>09:00-21:00</p>
          <p><strong>电子邮箱：</strong>service@huaban.com</p>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { Timer, Star, Service } from '@element-plus/icons-vue'
</script> 